import { BankOutlined, ShareAltOutlined,ContactsOutlined,TeamOutlined, LoginOutlined } from '@ant-design/icons';
import { Layout, Menu, message } from 'antd';
import React,{useEffect, useState}from 'react';
import { useNavigate, Outlet,useLocation } from 'react-router-dom';
import { post } from "../../util/post"
const { Header, Content, Footer, Sider } = Layout;


const Admin = () => {
  const navigate = new useNavigate()
  const location =new useLocation()
  const currPath = '/'+location.pathname.split('/')[2]
  const [collapsed, setCollapsed] = useState(false);
  const roles= localStorage.getItem('roles')
  useEffect(()=>{
    const arr =roles.split(',')
    if(!arr.includes('ADMIN')&&!arr.includes('SUPER_ADMIN'))
      navigate('/notfound')
  },[])
  const item = [
   {
      key: 2,
      icon: <LoginOutlined />,
      label:'登出',
      onClick: () => {
        post('/auth/logout').then(res => {
          if (res.data.code === 0) {
            message.success('已登出')
            navigate('/')
            localStorage.removeItem('TOKEN')
            localStorage.removeItem('roles')
          }
          else
            message.error(res.data.errorMsg)
        })
      }
    }
  ]
  const sideMenu = [
    {
      key: '/application',
      icon: <BankOutlined />,
      label: '入驻审核',
      onClick: () => {
        navigate('/admin/application', { replace: true }) //相对于history.replace
      }
    },
     {
      key: '/role',
      label: '角色管理',
      icon:<ContactsOutlined />,
      onClick:()=>{
        navigate('/admin/role',{replace:true})
      }
    }, {
      key: '/user',
      label: '用户管理',
      icon:<TeamOutlined />,
      onClick:()=>{
        navigate('/admin/user',{replace:true})
      }
    }
    ,{
      key: '/resource',
      label: '资源管理',
      icon:<ShareAltOutlined />,
      onClick: () => {
        navigate('/admin/resource', { replace: true })
      }
    }
  ]
  return (
    <Layout style={{
      minHeight: '100vh',
    }}>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal"  items={item} />
      </Header>
        <Layout>
          <Sider theme='light' collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} className="site-layout-background" width={200}>
            <Menu
              mode="inline"
              defaultSelectedKeys={[currPath]}
              defaultOpenKeys={['sub1']}
              style={{
                height: '100%',
              }}
              items={sideMenu}
            />
          </Sider>
          <Layout
        style={{
          padding: '0 24px 24px',
        }}
      >
          <Content
            style={{
              marginTop:'20px',
              padding: '0 24px',
              minHeight: 570,
              background: 'white'
            }}
          >
            <Outlet />
          </Content>
          </Layout>
        </Layout>
    </Layout>
  )
};

export default Admin;